import menuApi from '@/views/api/system/menu/menu'
import IconSelect from '@/components/IconSelect'

export default {
    components: {
        IconSelect,
    },
    data() {
        return {
            listLoading: false,
            dialogFormVisible: false,
            formLabelWidth: '100px',
            currentRow: '',
            form: {
                name: '',
                icon: '',
                component: '',
                path: '',
                description: '',
            },
            listQuery: {
                page: 1,
                pageSize: 5,
                name: undefined
            },
            list: [],
            visible: false,
        }
    },
    created() {
        this.init()
    },
    methods: {
        init() {
            this.fetchData()
        },
        // 获取菜单列表
        fetchData() {
            this.listLoading = true
            menuApi.getTreeMenu().then(response => {
                this.list = response.data;
                this.listLoading = false
            })
        },
        getIcon(icon) {
            this.form.icon = icon
            this.visible = false
        },
        add(id) {
            this.isAdd = true
            this.resetForm()
            this.dialogFormVisible = true
            if (id) {
                this.form.pid = id
            }
        },
        resetForm() {
            for (let item of Object.keys(this.form)) {
                this.form[item] = ''
            }
        },
        remove(row) {
            if (row === '') {
                this.$message({
                    message: '请选择要删除的数据',
                    type: 'warning'
                })
            } else {
                this.$confirm('您确定要删除这条数据吗？').then(() => {
                    menuApi.remove(row.id).then(() => {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                        this.fetchData()
                    })
                })
            }
        },
        edit(row) {
            if (row === '') {
                this.$message({
                    message: '请选择所要编辑的数据',
                    type: 'warning'
                })
            } else {
                this.form = Object.assign({}, row)
                this.isAdd = false
                this.dialogFormVisible = true
            }

        },
        search() {
            this.fetchData()
        },
        reset() {
            this.listQuery.name = ''
            // this.listQuery.description = ''
            this.fetchData()
        },
        save() {
            if (this.isAdd) {
                // 添加
                menuApi.add(this.form).then(() => {
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    })
                    this.fetchData()
                }).catch(() => {
                    this.$message({
                        message: '添加失败',
                        type: 'error'
                    })
                })
            } else {
                menuApi.update(this.form).then(() => {
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    })
                    this.fetchData()
                }).catch(() => {
                    this.$message({
                        message: '添加失败',
                        type: 'error'
                    })
                })
            }
            this.dialogFormVisible = false
        },
        handleCurrentChange(currentRow, oldCurrentRow) {
            this.currentRow = currentRow;
        }
    }
}
